<template lang="">
  <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
    <el-form ref="form" :model="form">
      <el-form-item label="发布类型:">
        <el-tag
          :key="tag"
          v-for="tag in form.label"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+ New Tag</el-button
        >
      </el-form-item>
      <el-form-item label="发布标题:">
        <el-col :span="6">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>
       <el-form-item label="封面地址:">
        <el-col :span="6">
          <el-input v-model="form.imgSrc"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
      <quill-editor v-model="form.content"></quill-editor>

      </el-form-item>
      <!-- 隐藏项 -->
      <el-form-item>
        <el-input v-model="form.page" name="page" type="hidden"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.id" name="id" type="hidden"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button v-show="!(this.id==='0')" type="primary" size="small" @click="submit"
          >修改</el-button
        >
        <el-button v-show="form.id==='0'" type="primary" size="small" @click="submit"
          >发布</el-button
        >
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'addRelease',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      username: '',
      form: {
        id: this.id,
        title: '',
        content: '',
        label: [],
        imgSrc: ''
      },
      // myhtml: "",
      defaultData: 'preview',
      timeValue: '',
      inputVisible: false,
      inputValue: ''
    }
  },
  created () {
    // this.form.page = this.$router.query.CurPage;
    this.getAricle()
    this.handleCreated()
  },
  methods: {
    async getAricle () {
      if (!(this.id === '0')) {
        const res = await this.$http.get('/article/getonearticle/' + this.id)
        var article = res.data.data
        this.form.id = article.id
        this.form.title = article.title
        this.form.content = article.content
        this.form.imgSrc = article.imgSrc
        this.form.label = article.label
      }
    },
    async imgAdd (pos, file) {
      // 上传图片
      var formData = new FormData()
      formData.append('image', file)
      console.log(file.miniurl)
      const res = await this.$http({
        method: 'post',
        url: 'article/upload',
        data: {
          file
        }
      })
      console.log(res)
      if (res.status === 200) {
        this.$message.success('上传成功')
        console.log(this.$refs.md.$imglst2Url())
        this.$refs.md.$img2Url(pos, res.data.newPath)
      }
    },
    async handleCreated () {
      if (this.$route.query.id) {
        const { data: res } = await this.$http.get(
          `article/write?id=${this.$route.query.id}&page=${this.$route.query.curPage}`
        )
        this.form = res.form
        console.log(this.form.id)
      } else {
      }
    },
    async submit () {
      if (this.id === '0') {
        console.log(this.form)
        const { data: res } = await this.$http.post('/article/addarticle', this.form)
        console.log(res)
        if (res.meta.code === 200) {
          this.$message.success('发布成功')
          this.form.title = ''
          this.form.content = ''
          this.form.id = null
          this.form.label = null
          this.form.imgSrc = null
        }
      } else {
        const { data: res } = await this.$http.post('/article/updatearticle/' + this.id, this.form)
        console.log(res)
        if (res.meta.code === 200) {
          this.$message.success('修改成功')
          this.form.title = ''
          this.form.content = ''
          this.form.id = null
          this.form.label = null
          this.form.imgSrc = null
        }
      }
    },
    handleClose (tag) {
      this.form.label.splice(this.form.label.indexOf(tag), 1)
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.form.label.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.el-breadcrumb {
  margin-bottom: 15px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
